<template>
  <button class="able-button" :class="type+(isTrue(circle)?' circle':'')">
    <slot></slot>
  </button>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
  props:['type','circle'],  
  // type = 'primary,success,warning,error,hollow,hw-primary,hw-success,hw-warning,hw-error'
  setup() {
    let buttonClass = ref(null)

    function isTrue(v) {
      if (typeof(v) == 'string') v = true
      if (typeof(v) == 'undefined') v = false
      return v
    }
    
    return{
      buttonClass,
      isTrue
    }
  },
}
</script>

<style lang="scss" scoped>
.able-button{
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  margin: 0.3rem;
  font-size: 0.9rem;
  background-color: #ccc;
  color: #fff;
  border-radius: .1rem;
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition-duration: 150ms;
  vertical-align: top;
  white-space: nowrap;
}
.able-button:focus {
  outline: .1rem dashed #fff;
  outline-offset: -.2rem;
}
.able-button:hover {
  background-color: #ddd;
}
.able-button:disabled {
  opacity:0.3;
  cursor: no-drop;
  // text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999; //空心
  // text-shadow: -1px -1px #eee, 1px 1px #666;  // 阳文
  text-shadow: 1px 1px #eee, -1px -1px #666;  //阴文
}
.primary{
  color: #fff;
  background-color: $color-primary;
}
.primary:hover{
  background-color: $color-primary-light;
}
.success{
  color: #fff;
  background-color: $color-success;
}
.success:hover{
  background-color: $color-success-light;
}
.warning{
  color: #fff;
  background-color: $color-warning;
}
.warning:hover{
  background-color: $color-warning-light;
}
.error{
  color: #fff;
  background-color: $color-error;
}
.error:hover{
  background-color: $color-error-light;
}
// 空心按钮
.hollow{
  border: .1rem solid #ccc;
  padding: 0.4rem 1.4rem;
  background-color: #fff;
  color: #999;
}
.hollow:hover{
  background-color: rgba(245,245,245,0.5);
}
.hw-primary{
  border: .1rem solid $color-primary-light;
  padding: 0.4rem 1.4rem;
  background-color: $color-primary-away;
  color: $color-primary-light;
}
.hw-primary:hover{
  background-color: $color-primary;
  color: #fff;
}
.hw-success{
  border: .1rem solid $color-success-light;
  padding: 0.4rem 1.4rem;
  background-color: $color-success-away;
  color: $color-success;
}
.hw-success:hover{
  background-color: $color-success;
  color: #fff;
}
.hw-warning{
  border: .1rem solid $color-warning-light;
  padding: 0.4rem 1.4rem;
  background-color: $color-warning-away;
  color: $color-warning;
}
.hw-warning:hover{
  background-color: $color-warning;
  color: #fff;
}
.hw-error{
  border: .1rem solid $color-error-light;
  padding: 0.4rem 1.4rem;
  background-color: $color-error-away;
  color: $color-error;
}
.hw-error:hover{
  background-color: $color-error;
  color: #fff;
}
// 圆形按钮
.circle{
  border-radius: 50%;
  width: 2.5rem;height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle:focus {
  outline: none;
}
</style>